<template>
  <div class="home-container" @mousemove="handleMouseMove">
    <!-- Emoji 动画层 -->
    <div class="emoji-container">
      <transition-group name="emoji-float">
        <div
          v-for="emoji in emojis"
          :key="emoji.id"
          class="floating-emoji"
          :style="{
            left: `${emoji.x}px`,
            top: `${emoji.y}px`,
            transform: `rotate(${emoji.rotation}deg) scale(${emoji.scale})`,
            opacity: emoji.opacity
          }"
        >
          {{ emoji.icon }}
        </div>
      </transition-group>
    </div>
    
    <!-- 顶部导航栏 -->
    <nav class="navbar" :class="{ 'navbar-scrolled': isScrolled }">
      <div class="nav-content">
        <div class="nav-left">
          <img :src="logoUrl" alt="Logo" class="nav-logo">
          <span class="nav-brand">EasyPan</span>
        </div>
        
        <div class="nav-right">
          <a href="#features" class="nav-link">产品特性</a>
          <a href="#advantages" class="nav-link">核心优势</a>
          <a href="#pricing" class="nav-link">价格方案</a>
          <el-button type="primary" class="login-btn" @click="handleLogin">立即使用</el-button>
        </div>
      </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          新一代智能云存储平台
          <div class="title-decoration"></div>
        </h1>
        <p class="hero-subtitle">安全存储·高效协作·智能管理</p>
        <div class="hero-actions">
          <el-button type="primary" size="large" class="start-btn" @click="handleStart">
            开始使用
            <el-icon class="el-icon--right"><ArrowRight /></el-icon>
          </el-button>
          <el-button size="large" class="learn-btn" @click="handleLearn">
            了解更多
            <el-icon class="el-icon--right"><InfoFilled /></el-icon>
          </el-button>
        </div>
      </div>
      <div class="hero-image">
        <img :src="heroImageUrl" alt="Hero Image">
      </div>
    </section>

    <!-- 产品特性 -->
    <section id="features" class="features-section">
      <h2 class="section-title">
        产品特性
        <div class="title-underline"></div>
      </h2>
      <div class="features-grid">
        <div class="feature-card" v-for="(feature, index) in features" :key="index">
          <el-icon :size="40" class="feature-icon">
            <component :is="feature.icon" />
          </el-icon>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-desc">{{ feature.description }}</p>
        </div>
      </div>
    </section>

    <!-- 核心优势 -->
    <section id="advantages" class="advantages-section">
      <h2 class="section-title">
        核心优势
        <div class="title-underline"></div>
      </h2>
      <div class="advantages-container">
        <div class="advantage-item" v-for="(advantage, index) in advantages" :key="index">
          <div class="advantage-content">
            <h3 class="advantage-title">{{ advantage.title }}</h3>
            <p class="advantage-desc">{{ advantage.description }}</p>
            <ul class="advantage-list">
              <li v-for="(point, i) in advantage.points" :key="i">{{ point }}</li>
            </ul>
          </div>
          <div class="advantage-image">
            <img :src="advantage.image" :alt="advantage.title">
          </div>
        </div>
      </div>
    </section>

    <!-- 价格方案 -->
    <section id="pricing" class="pricing-section">
      <h2 class="section-title">
        价格方案
        <div class="title-underline"></div>
      </h2>
      <div class="pricing-grid">
        <div class="pricing-card" v-for="(plan, index) in pricingPlans" :key="index"
          :class="{ 'popular': plan.isPopular }">
          <div class="pricing-header">
            <h3 class="plan-name">{{ plan.name }}</h3>
            <div class="plan-price">
              <span class="currency">￥</span>
              <span class="amount">{{ plan.price }}</span>
              <span class="period">/月</span>
            </div>
          </div>
          <ul class="plan-features">
            <li v-for="(feature, i) in plan.features" :key="i">
              <el-icon><Check /></el-icon>
              {{ feature }}
            </li>
          </ul>
          <el-button 
            :type="plan.isPopular ? 'primary' : 'default'"
            class="choose-plan-btn"
            @click="handleChoosePlan(plan)">
            选择方案
          </el-button>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <img :src="logoUrl" alt="Logo" class="footer-logo">
          <p class="footer-desc">EasyPan - 让数据存储更简单</p>
          <div class="social-links">
            <a href="#" class="social-link"><el-icon><Platform /></el-icon></a>
            <a href="#" class="social-link"><el-icon><Share /></el-icon></a>
            <a href="#" class="social-link"><el-icon><Message /></el-icon></a>
          </div>
        </div>
        <div class="footer-section">
          <h4>产品</h4>
          <a href="#">产品功能</a>
          <a href="#">解决方案</a>
          <a href="#">技术架构</a>
          <a href="#">安全保障</a>
        </div>
        <div class="footer-section">
          <h4>资源</h4>
          <a href="#">开发文档</a>
          <a href="#">帮助中心</a>
          <a href="#">技术社区</a>
          <a href="#">API文档</a>
        </div>
        <div class="footer-section">
          <h4>关于我们</h4>
          <a href="#">公司介绍</a>
          <a href="#">联系我们</a>
          <a href="#">加入我们</a>
          <a href="#">合作伙伴</a>
        </div>
      </div>
      <div class="footer-bottom">
        <p>© 2024 EasyPan. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowRight,
  InfoFilled,
  Check,
  Platform,
  Share,
  Message,
  Upload,
  Lock,
  Connection,
  Monitor,
  Setting,
  Cpu
} from '@element-plus/icons-vue'

const router = useRouter()
const isScrolled = ref(false)

// 图片资源
const logoUrl = 'https://img.icons8.com/fluency/96/000000/cloud-storage.png'
const heroImageUrl = '/src/assets/images/hero-3d.png'
const advantageImages = {
  storage: '/src/assets/images/storage-3d.png',
  collaboration: '/src/assets/images/collaboration-3d.png',
  management: '/src/assets/images/management-3d.png'
}

// 产品特性数据
const features = [
  {
    icon: 'Upload',
    title: '极速传输',
    description: '突破性的传输技术，支持TB级文件秒传，让等待成为历史'
  },
  {
    icon: 'Lock',
    title: '军工级加密',
    description: '采用AES-256位加密，区块链技术加持，数据安全固若金汤'
  },
  {
    icon: 'Connection',
    title: '实时协作',
    description: '零延迟的多人协作体验，让团队创作更有默契'
  },
  {
    icon: 'Monitor',
    title: 'AI智能管理',
    description: 'AI驱动的智能分类、标签识别，让文件管理更轻松'
  },
  {
    icon: 'Setting',
    title: '无缝集成',
    description: '与主流办公软件完美对接，工作流程更顺畅'
  },
  {
    icon: 'Cpu',
    title: '开放平台',
    description: '丰富的API接口，助力企业打造专属云存储方案'
  }
]

// 核心优势数据
const advantages = [
  {
    title: '新一代分布式存储架构',
    description: '基于IPFS的去中心化存储技术，数据永不丢失',
    points: [
      '99.999999999%的数据可靠性',
      '全球CDN加速节点',
      '智能副本容灾机制',
      '全链路数据加密'
    ],
    image: advantageImages.storage
  },
  {
    title: '企业级协作平台',
    description: '重新定义团队协作方式，激发创新潜能',
    points: [
      '实时多人在线编辑',
      '智能权限管理系统',
      '团队空间定制化',
      '协作轨迹追踪'
    ],
    image: advantageImages.collaboration
  },
  {
    title: 'AI驱动的智能管理',
    description: '让每一个文件都被妥善管理，随手可得',
    points: [
      'AI文件分类与标签',
      '智能搜索推荐',
      '自动化工作流',
      '数据分析洞察'
    ],
    image: advantageImages.management
  }
]

// 价格方案数据
const pricingPlans = [
  {
    name: '个人版',
    price: '0',
    features: [
      '50GB存储空间',
      '基础文件管理',
      '多端同步访问',
      '标准技术支持'
    ],
    isPopular: false
  },
  {
    name: '专业版',
    price: '49',
    features: [
      '500GB存储空间',
      'AI智能管理',
      '多人实时协作',
      '优先技术支持',
      '高级安全特性'
    ],
    isPopular: true
  },
  {
    name: '企业版',
    price: '199',
    features: [
      '无限存储空间',
      '专属存储集群',
      '企业级安全保障',
      '7×24技术支持',
      '个性化定制方案'
    ],
    isPopular: false
  }
]

// 监听滚动事件
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 按钮点击事件处理
const handleLogin = () => {
  router.push('/login')
}

const handleStart = () => {
  router.push('/register')
}

const handleLearn = () => {
  document.getElementById('features').scrollIntoView({ behavior: 'smooth' })
}

const handleChoosePlan = (plan) => {
  router.push({
    path: '/register',
    query: { plan: plan.name }
  })
}

// Emoji 动画相关
const emojis = ref([])
let emojiId = 0

// Emoji 库
const emojiList = ['✨', '💫', '⭐', '🌟', '💡', '🚀', '💎', '🌈', '🎯', '🎨', '🔮', '⚡']

// 创建新的 emoji
const createEmoji = (x, y) => {
  const emoji = {
    id: emojiId++,
    icon: emojiList[Math.floor(Math.random() * emojiList.length)],
    x,
    y,
    rotation: Math.random() * 360,
    scale: 0.5 + Math.random() * 1,
    opacity: 1
  }
  
  emojis.value.push(emoji)
  
  // 动画结束后移除 emoji
  setTimeout(() => {
    const index = emojis.value.findIndex(e => e.id === emoji.id)
    if (index !== -1) {
      emojis.value.splice(index, 1)
    }
  }, 1500)
}

// 处理鼠标移动
let lastEmojiTime = 0
const handleMouseMove = (event) => {
  const now = Date.now()
  // 限制emoji生成频率
  if (now - lastEmojiTime > 100) {
    const rect = event.currentTarget.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    createEmoji(x, y)
    lastEmojiTime = now
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #ffffff;
  will-change: transform;
  transform: translateZ(0);
  
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
    z-index: 1000;
    
    &.navbar-scrolled {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      height: 60px;
    }
    
    .nav-content {
      max-width: 1200px;
      margin: 0 auto;
      height: 100%;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .nav-left {
        display: flex;
        align-items: center;
        
        .nav-logo {
          width: 36px;
          height: 36px;
          margin-right: 12px;
          object-fit: contain;
        }
        
        .nav-brand {
          font-size: 24px;
          font-weight: 600;
          background: linear-gradient(135deg, #0061ff, #60efff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .nav-right {
        display: flex;
        align-items: center;
        gap: 32px;
        
        .nav-link {
          color: #333;
          text-decoration: none;
          font-weight: 500;
          transition: all 0.3s;
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
        
        .login-btn {
          background: linear-gradient(135deg, #0061ff, #60efff);
          border: none;
          padding: 10px 30px;
          font-weight: 500;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 97, 255, 0.2);
          }
        }
      }
    }
  }
  
  .hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
      transform: rotate(-45deg);
    }
    
    .hero-content {
      max-width: 600px;
      
      .hero-title {
        font-size: 64px;
        font-weight: 700;
        color: #1a237e;
        margin-bottom: 24px;
        position: relative;
        
        .title-decoration {
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 150px;
          height: 4px;
          background: linear-gradient(135deg, #0061ff, #60efff);
          border-radius: 2px;
        }
      }
      
      .hero-subtitle {
        font-size: 28px;
        color: #64748b;
        margin-bottom: 40px;
      }
      
      .hero-actions {
        display: flex;
        gap: 16px;
        
        .start-btn {
          background: linear-gradient(135deg, #0061ff, #60efff);
          border: none;
          padding: 15px 40px;
          font-size: 20px;
          
          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(0, 97, 255, 0.3);
          }
        }
        
        .learn-btn {
          border: 2px solid #0061ff;
          color: #0061ff;
          padding: 15px 40px;
          font-size: 20px;
          
          &:hover {
            background: rgba(0, 97, 255, 0.1);
          }
        }
      }
    }
    
    .hero-image {
      max-width: 500px;
      
      img {
        width: 100%;
        height: auto;
        object-fit: contain;
        animation: float 6s ease-in-out infinite;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
      }
    }
  }
  
  .features-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(180deg, #f6f9fc 0%, #ffffff 100%);
    }
    
    .section-title {
      text-align: center;
      font-size: 36px;
      font-weight: 700;
      color: #1a237e;
      margin-bottom: 60px;
      position: relative;
      
      .title-underline {
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #1a237e, #0d47a1);
        border-radius: 2px;
      }
    }
    
    .features-grid {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 32px;
      
      .feature-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        padding: 32px;
        border-radius: 16px;
        text-align: center;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
          background: linear-gradient(135deg, #0061ff, #60efff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 48px;
          margin-bottom: 24px;
        }
        
        .feature-title {
          font-size: 20px;
          font-weight: 600;
          color: #333;
          margin-bottom: 16px;
        }
        
        .feature-desc {
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
  
  .advantages-section {
    padding: 100px 0;
    
    .advantages-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      
      .advantage-item {
        display: flex;
        align-items: center;
        margin-bottom: 80px;
        
        &:nth-child(even) {
          flex-direction: row-reverse;
          
          .advantage-content {
            padding-left: 0;
            padding-right: 60px;
          }
        }
        
        .advantage-content {
          flex: 1;
          padding-right: 60px;
          
          .advantage-title {
            font-size: 32px;
            font-weight: 700;
            color: #1a237e;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #0061ff, #60efff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          
          .advantage-desc {
            font-size: 18px;
            color: #666;
            margin-bottom: 24px;
            line-height: 1.6;
          }
          
          .advantage-list {
            list-style: none;
            padding: 0;
            
            li {
              margin-bottom: 12px;
              padding-left: 24px;
              position: relative;
              color: #333;
              
              &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 8px;
                width: 8px;
                height: 8px;
                background: linear-gradient(135deg, #0061ff, #60efff);
                border-radius: 50%;
              }
            }
          }
        }
        
        .advantage-image {
          flex: 1;
          
          img {
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 16px;
            transition: transform 0.3s ease;
            
            &:hover {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }
  
  .pricing-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f6f9fc 0%, #eef2f7 100%);
    
    .pricing-grid {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 32px;
      
      .pricing-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        padding: 40px;
        border-radius: 16px;
        text-align: center;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        
        &.popular {
          background: linear-gradient(135deg, #0061ff, #60efff);
          
          * {
            color: #ffffff !important;
          }
          
          .choose-plan-btn {
            background: #ffffff;
            color: #0061ff !important;
          }
        }
        
        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        
        .pricing-header {
          margin-bottom: 32px;
          
          .plan-name {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
          }
          
          .plan-price {
            .currency {
              font-size: 24px;
              font-weight: 500;
              color: #1a237e;
              vertical-align: top;
            }
            
            .amount {
              font-size: 48px;
              font-weight: 700;
              color: #1a237e;
              background: linear-gradient(135deg, #0061ff, #60efff);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            
            .period {
              font-size: 16px;
              color: #666;
            }
          }
        }
        
        .plan-features {
          list-style: none;
          padding: 0;
          margin-bottom: 32px;
          
          li {
            margin-bottom: 12px;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .el-icon {
              color: #1a237e;
              margin-right: 8px;
            }
          }
        }
        
        .choose-plan-btn {
          width: 100%;
          padding: 12px;
          border-radius: 24px;
          font-weight: 500;
          background: linear-gradient(135deg, #0061ff, #60efff);
          border: none;
          
          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(0, 97, 255, 0.3);
          }
        }
      }
    }
  }
  
  .footer {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
      transform: rotate(-45deg);
    }
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 2fr repeat(3, 1fr);
      gap: 40px;
      margin-bottom: 60px;
      
      .footer-section {
        .footer-logo {
          width: 40px;
          height: 40px;
          margin-bottom: 16px;
          object-fit: contain;
          filter: brightness(0) invert(1);
        }
        
        .footer-desc {
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 24px;
          line-height: 1.6;
        }
        
        .social-links {
          display: flex;
          gap: 16px;
          
          .social-link {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: all 0.3s;
            
            &:hover {
              background: rgba(255, 255, 255, 0.2);
              transform: translateY(-2px);
            }
          }
        }
        
        h4 {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 24px;
        }
        
        a {
          display: block;
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          margin-bottom: 12px;
          transition: all 0.3s;
          
          &:hover {
            color: #fff;
            transform: translateX(4px);
          }
        }
      }
    }
    
    .footer-bottom {
      text-align: center;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      
      p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
      }
    }
  }
}

// 动画优化
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

// 响应式优化
@media screen and (max-width: 768px) {
  .home-container {
    .navbar {
      .nav-content {
        .nav-right {
          .nav-link {
            display: none;
          }
        }
      }
    }
    
    .hero-section {
      flex-direction: column;
      text-align: center;
      padding-top: 100px;
      
      .hero-content {
        margin-bottom: 40px;
        
        .hero-title {
          font-size: 40px;
          
          .title-decoration {
            left: 50%;
            transform: translateX(-50%);
          }
        }
        
        .hero-subtitle {
          font-size: 20px;
        }
        
        .hero-actions {
          justify-content: center;
        }
      }
    }
    
    .advantages-section {
      .advantages-container {
        .advantage-item {
          flex-direction: column !important;
          text-align: center;
          
          .advantage-content {
            padding: 0 0 40px 0 !important;
            
            .advantage-list {
              display: inline-block;
              text-align: left;
            }
          }
        }
      }
    }
    
    .footer {
      .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        
        .footer-section {
          .social-links {
            justify-content: center;
          }
        }
      }
    }
  }
}

// 添加 Emoji 动画样式
.emoji-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  
  .floating-emoji {
    position: absolute;
    font-size: 24px;
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
    pointer-events: none;
  }
}

.emoji-float-enter-active {
  animation: emoji-float-in 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.emoji-float-leave-active {
  animation: emoji-float-out 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes emoji-float-in {
  0% {
    transform: translateY(0) scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(1.5) rotate(360deg);
    opacity: 0;
  }
}

@keyframes emoji-float-out {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0) rotate(360deg);
    opacity: 0;
  }
}
</style> 